<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    <style>
	*{
		margin: 0;
		padding:0;
	}
	.box{
		width: 200px;
		height: 200px;
		border: none;
		background-color: skyblue;
		animation: move 5s infinite;
	}
	@keyframes move{
		0%{
			transform: translateX(0);
		}
		25%{
			transform: translateX(500px);
		}
		50%{
			transform: translate(500px,500px);
		}
		75%{
			transform: translateY(500px);
		}
		100%{
			transform: translateY(0);
		}
	}

</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>